<template>
  <div class="centerContainer">
    <div class="header">
      <div class="left">
        <img class="avatar" src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="">
        <div class="info">
          <p class="userName">{{userInfo.name}}</p>
          <p class="userType">普通用户</p>
        </div>
      </div>
      <div class="right">
        <a  class="codeUrl" href="###">
          <i class="iconfont icon-erweima"></i>
        </a>
        <div class="member"></div>
      </div>
    </div>

    <div class="asset">
      <div class="title">我的资产</div>
      <div class="assetList">
        <div class="assetItem">
          <p class="assetCount">0</p>
          <p class="assetName">余额</p>
        </div>
        <div class="assetItem">
          <p class="assetCount">0</p>
          <p class="assetName">红包</p>
        </div>
        <div class="assetItem">
          <p class="assetCount">0</p>
          <p class="assetName">优惠券</p>
        </div>
        <div class="assetItem">
          <p class="assetCount">0</p>
          <p class="assetName">津贴</p>
        </div>
        <div class="assetItem">
          <p class="assetCount">0</p>
          <p class="assetName">礼品卡</p>
        </div>
      </div>
    </div>

    <van-grid :column-num="3">
      <van-grid-item  icon="orders-o" text="我的订单" />
      <van-grid-item  icon="user-circle-o" text="帐号管理" />
      <van-grid-item  icon="phone-o" text="我的手机号" />
      <van-grid-item  icon="calendar-o" text="周六一起拼" />
      <van-grid-item  icon="balance-list-o" text="售后服务" />
      <van-grid-item  icon="bill-o" text="邀请返利" />
      <van-grid-item  icon="bag-o" text="优先购" />
      <van-grid-item  icon="gold-coin-o" text="积分中心" />
      <van-grid-item  icon="gem-o" text="会员俱乐部" />
      <van-grid-item  icon="location-o" text="地址管理" />
      <van-grid-item  icon="shield-o" text="支付安全" />
      <van-grid-item  icon="service-o" text="帮助与客服" />
      <van-grid-item  icon="records" text="意见反馈" />
      <van-grid-item  icon="guide-o" text="我的竞拍" />
    </van-grid>

    <div class="logout" @click="logout">退出登录</div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Admin',
  computed:{
    ...mapState({
      userInfo:state => state.user.userInfo
    })
  },
  methods:{
    async logout() {
      try {
        await this.$store.dispatch('userLogout')
        this.$router.push('/')
      } catch (error) {
        alert('退出登录失败' + error.message)
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .centerContainer{
    height: 100%;
    .header{
      width: 100%;
      box-sizing: border-box;
      height: 135px;
      padding-left: 15px;
      background-color: #F6CB81;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        width: 255px;
        height: 71px;
        padding: 32px 0;
        display: flex;
        align-items: center;
        .avatar{
          width: 71px;
          height: 71px;
          border-radius: 50%;
        }
        .info{
          width: 169px;
          height: 40.2px;
          padding-left: 15px;
          color: #fff;
          .userName{
            font-size: 18px;
            margin: 0;
          }
          .userType{
            font-size: 14px;
            margin: 0;
          }
        }
      }
      .right{
        width: 96.5px;
        height: 94px;
        position: relative;
        .iconfont{
          width: 32px;
          height: 32px;
          font-size: 26px;
          color: #000;
          position: absolute;
          top: 8px;
          right: 7px;
        }
      }
    }
    .asset{
      width: 375.2px;
      height: 132.8px;
      border-bottom: 10px solid #F4F4F4;
      .title{
        width: 360.2px;
        height: 52px;
        border-bottom: 0.8px solid #D9D9D9;
        margin-left: 15px;
        font-size: 14px;
        color: #333;
        line-height: 52px;
      }
      .assetList{
        width: 375.2px;
        height: 80px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .assetItem{
          width: 70.237px;
          height: 64px;
          padding-top: 16px;
          text-align: center;
          .assetCount{
            margin: 0;
            margin-bottom: 8px;
          }
          .assetName{
            margin: 0;
            font-size: 12px;
          }
        }
      }
    }
    .logout{
      width: 373px;
      height: 46px;
      border-top: 20px solid #F4F4F4;
      border-bottom: 10px solid #F4F4F4;
      text-align: center;
      line-height: 46px;
      font-size: 14px;
    }
  }
</style>
